<template>
  <div class="n-register">
    <van-nav-bar :title="header"/>
    <div class="dph-content">
      <div class="dph-content-user">
        <div class="content-user-photo">
          <img :style='{backgroundImage:"url(\"" + userPhoto + "\")"}'>
        </div>
        <div class="content-user-name"><p>{{ userName }}</p></div>
      </div>
      <div class="dph-content-text"><p>付款金额</p></div>
      <div class="dph-content-money">
        <span class="dph-content-icon">￥</span>
        <van-field v-model="moneyText" :readonly="boardReadState" placeholder="0.00" @touchstart.native.stop="keyBoardShow = true"/>
      </div>
      <div class="dph-content-btn">
        <button :class="disabledClassName" :disabled="isDisabledStatus" @click="submitAmount">确认支付
        </button>
      </div>
    </div>
    <van-number-keyboard
      :show="keyBoardShow"
      extra-key="."
      close-button-text="完成"
      @blur="keyBoardShow = false"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>

<script>
  import {
    Icon,
    Row,
    Field,
    Col,
    Uploader,
    Loading,
    NumberKeyboard,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'payment',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Field.name]: Field,
      [Actionsheet.name]: Actionsheet,
      [NumberKeyboard.name]: NumberKeyboard,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '付款',
        moneyText: '',
        keyBoardShow: false,
        boardReadState: true,
        userPhoto: '',
        userName: '地瓜老火锅',
        isDisabledStatus: true,
        disabledClassName: 'dph-content-button'
      };
    },
    watch: {
      moneyText: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      }
    },
    methods: {

      submitAmount() {
        console.log(this.moneyText);
      },

      isDisabled() {
        if (this.moneyText !== null && this.moneyText !== undefined && this.moneyText !== '' && /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(this.moneyText)) {
          this.isDisabledStatus = false;
          this.disabledClassName = 'dph-content-button isSubmit';
        } else {
          this.isDisabledStatus = true;
          this.disabledClassName = 'dph-content-button';
        }
      },
      onInput(value) {
        let money = this.moneyText;
        if (money && money.length > 8) {
          money = money.slice(0, money.length - 1);
        } else {
          this.moneyText += value;
        }
      },
      onDelete() {
        console.log(typeof this.moneyText);
        this.moneyText = this.moneyText.slice(0, this.moneyText.length - 1);
      }
    }
  };
</script>
<style lang="less" scoped>
  .dph-content {
    margin: .3rem;
    width: 6.9rem;
    height: 4rem;
    p {
      margin: 0;
    }
    .dph-content-user {
      position: relative;
      text-align: center;
      .content-user-photo {
        position: relative;
        left: 2.86rem;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
          font-size: 0;
          -webkit-background-size: cover;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
      .content-user-name {
        padding-top: .18rem;
        font-size: 16px;
        color: #000;
      }
    }
    .dph-content-text {
      padding-top: .48rem;
      padding-left: .5rem;
      padding-bottom: .2rem;
      p {
        font-size: 13px;
        color: #000;
      }
    }
    .dph-content-money {
      height: 1.56rem;
      background: #fff;
      border-radius: .06rem;
      .dph-content-icon {
        float: left;
        padding-top: .3rem;
        padding-left: .5rem;
        width: .7rem;
        color: #000;
        font-size: .6rem;
        font-weight: bold;
      }
      .van-cell {
        float: left;
        margin-top: .2rem;
        padding: 0;
        width: 5rem;
        font-size: .8rem;
        font-weight: bold;
        input::-webkit-input-placeholder {
          color: #000;
          font-size: .8rem;
        }
      }
    }
    .dph-content-btn {
      margin-top: .3rem;
      text-align: center;
      .dph-content-button {
        display: inline-block;
        width: 5.56rem;
        height: .82rem;
        line-height: .82rem;
        text-align: center;
        color: #fff;
        font-size: 13px;
        border-radius: 3px;
        background: #AAC2FF;
        border: none;
      }
      .dph-content-button.isSubmit {
        background: #2F66F3;
      }
    }
  }
</style>
